TNotes.electron

Appearance

0038. 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信

0038. 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信 ​

📚 相关资源

1. 📝 概述 ​

  • 主进程 <-> 渲染进程
    • 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信
    • 图 0

2. 💻 demos.1 - 使用 send、on 实现主进程和渲染进程之间的双向 IPC 通信 ​

  • 源码实现
js
const { ipcRenderer } = require('electron')

// 1. 按钮被点击
btn.onclick = () => {
  // 2. 渲染进程主动给主进程发 'message-from-renderer' 消息
  ipcRenderer.send('message-from-renderer', 1, 2, 3)
}

// 3. 渲染进程被动监听来自主进程的 'message-from-main' 消息
ipcRenderer.on('message-from-main', (_, res) => {
  console.log('receive message from main process', res)
})
js
const { app, BrowserWindow, ipcMain } = require('electron')

let win
function createWindow() {
  win = new BrowserWindow({
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  })

  win.webContents.openDevTools()

  win.loadFile('./index.html')
}

function handleIPC() {
  // 1. 主进程被动监听来自渲染进程的 'message-from-renderer' 消息
  ipcMain.on('message-from-renderer', (event, ...args) => {
    console.log('receive message from renderer process', ...args)

    // 2. 执行求和功能
    const sum = args.reduce((a, b) => a + b, 0)

    // 3. 主进程处理完相应任务后，给渲染进程响应一个结果，主动给渲染进程发 'message-from-main' 消息。

    // A.
    // win.webContents.send('message-from-main', sum)

    // B.
    // event.sender.send('message-from-main', sum)

    // C.
    event.reply('message-from-main', sum)

    // console.log(win.webContents === event.sender) // true
    // console.log(win.webContents.send === event.sender.send) // true

    // A B C 3 种写法都是等效的，都可以给渲染进程响应一个结果。
  })
}

app.on('ready', () => {
  createWindow()
  handleIPC()
})
  • 最终效果
    • 渲染进程通过 ipcRenderer.send 方法给主进程发消息，主进程通过 ipcMain.on 方法监听来自渲染进程的消息。
    • 主进程收到消息之后，通过 win.webContents.send、e.senderer.send、e.replay 其中一个方法给渲染进程回复消息，渲染进程通过 ipcRenderer.on 来接受来自主进程的消息。
    • 图 1
  • 主进程日志
bash
receive message from renderer process 1 2 3

Discussions